<template>
  <view class="tabbar">
    <view
      class="tabbar-item"
      v-for="(item, index) in tabs"
      :key="index"
      :class="{ active: activeIndex == index }"
      @tap="handleTabChange(index)"
    >
      <image
        :src="activeIndex == index ? item.activeImage : item.image"
        class="tabbar-item-image"
      />
      <text class="tabbar-item-text">{{ item.name }}</text>
    </view>
  </view>
</template>
<script>
export default {
  name: "Tabbar",
  model: {
    prop: "current",
    event: "input"
  },
  props: {
    current: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      tabs: [
        {
          name: "首页",
          image: "/pages/activity/static/mosushop/home.png",
          activeImage: "/pages/activity/static/mosushop/home-active.png"
        },
        {
          name: "饮品券",
          image: "/pages/activity/static/mosushop/coupon.png",
          activeImage: "/pages/activity/static/mosushop/coupon-active.png"
        },
        {
          name: "雪王周边",
          image: "/pages/activity/static/mosushop/activity.png",
          activeImage: "/pages/activity/static/mosushop/activity-active.png"
        },
        {
          name: "我的订单",
          image: "/pages/activity/static/mosushop/order.png",
          activeImage: "/pages/activity/static/mosushop/order-active.png"
        }
      ],
      activeIndex: 0
    }
  },
  methods: {
    handleTabChange(index) {
      this.activeIndex = index
      this.$emit("input", index)
    }
  }
}
</script>
<style lang="scss" scoped>
.tabbar {
  width: 100%;
  height: 150rpx;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  align-items: center;

  &-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: $uni-font-size-sm;
    &.active {
      font-weight: bold;
    }

    &-image {
      width: 50rpx;
      height: 50rpx;
      margin-bottom: $uni-spacing-row-base;
    }
  }
}
</style>
